<script lang="ts" setup>

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Boolean,
      default: true
    },
    back: {
      type: Boolean,
      default: true
    }
  })


</script>

<template>
  <div :class="['page-view',back?'page-view-back':'',padding?'page-view-pad':'']">
    <slot />
    <v-loading v-if="loading" />
  </div>
</template>

<style scoped lang="scss">

  .page-view-pad{
    padding: var(--w-page-padding)  ;
  }

  .page-view{
    @include abs-group(var(--w-page-padding-left),var(--w-page-padding-top), var(--w-page-padding-right) ,var(--w-page-padding-bottom));
    overflow-x:hidden;
    overflow-y: auto;
  }

  .page-view-back{
    background: var(--w-bg-box);
  }
</style>
